<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../412/lib/vue.js"></script>
    <style>
        .static{
            width:150px;
            height:150px;
            font-size: 40px;
            text-align: center;
            line-height: 150px;
        }
        .a{
            background: firebrick;
        }
        .b{
            border:20px solid blueviolet;
            
        }
        .c{
            border-radius: 50%;
        }
        .mains{

        }
        .navs{
            width:440px;
            display: flex;
            justify-content: space-between;
        }
        .nav{
            width:100px;
            height:38px;
            border-radius: 10px;
            text-align: center;
            line-height: 38px;
            background: pink;
            color:#fff;
            cursor: pointer;
        }
        .nav.active{
            background: deeppink;
            color:aquamarine;
        }
        .content{

        }
        .citem{
            width:440px;
            height:440px;
            border-radius: 20px;
            color:#f50;
            font-size: 60px;
            background: darkorchid;
            text-align: center;
            line-height: 440px;
            margin-top:20px;
        }
        table td{
            border:1px solid #000;
            padding:3px;
        }
    </style>
</head>
<body>
    <div id="app">
        <h2>{{title}}</h2>
        <table>
            <thead>
                <tr>
                    <td>序号</td>
                    <td>选中</td>
                    <td>名称</td>
                    <td>描述</td>
                    <td>单价</td>
                    <td>数量</td>
                    <td>小计</td>
                    <td>操作</td>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(l,i) in goods" :key="i">
                    <td>{{i+1}}</td>
                    <td> <input type="checkbox" v-model="l.check"></td>
                    <td> {{l.title}}</td>
                    <td> <img :src="imgSrc"  width="100" height="50"  alt=""></td>
                    <td> {{l.price }}</td>
                    <td> <input type="number" v-model="l.count" > </td>
                    <td> {{l.price * l.count}}</td>
                    <td><button @click="goods.splice(i,1)">删除</button></td>
                </tr>
            </tbody>
        </table>
        <div>
            <p>
                <label for="check">全选反选</label>
                <input type="checkbox"  id="check" v-model="quan" >
            </p>
            <p>
                <button @click="Deletecheck">删除选中</button>
            </p>
            <p>
                选中数量: {{checknum}} /  总数量 :{{num}}
            </p>
            <p>
                选中价值:{{checkPrice}} /  总价值: {{price}}
            </p>
        </div>
    </div>
    <script>
        const vm = new Vue({
            data:{
                title:"v-model 实现简易的购物车  ",
                goods:[
                    {check:false,title:"上衣",price:200,count:10},
                    {check:true,title:"裤子",price:100,count:10},
                    {check:false,title:"鞋子",price:500,count:10},
                    {check:false,title:"风衣",price:1000,count:10},
                    {check:true,title:"帽子",price:300,count:10},
                    {check:true,title:"西服",price:2000,count:10},
                ],
                imgSrc:'http://47.104.209.44/base/imgs/1.jpg',
                checknum:0,
                num:0,
                checkPrice:0,
                price: 0,
            },
            computed:{
                quan:{
                    get(){
                        // return this.goods.every(item=>item.check)
                        this.checknum=0;
                        this.num = 0;
                        this.checkPrice = 0;
                        this.price = 0;
                         var flag = true;
                        this.goods.forEach(item=>{
                            if(!item.check){
                                flag = false;
                            }
                            if(item.check){
                                this.checknum++
                                this.num+=(item.count)*1
                                this.checkPrice += item.price*1
                                this.price += item.count*item.price;
                            }
                        })
                        return flag 
                    },
                    set(v){
                        this.goods = this.goods.map(item=>{
                            item.check = v;
                            return item 
                        })
                    }
                },
                check:{
                    get(){},
                    set(v){
                        this.goods =this.goods.map(item=>{
                            let count
                            if(item.check = v){
                                return count++
                            }
                            this.checknum = count
                        })
                    }
                }
            },
            methods:{
                Deletecheck(){
                    this.goods = this.goods.filter(item=>!item.check)  
                },
            },
            mounted(){
              
                document.getElementsByTagName("title")[0].innerHTML = this.title 
            }
        }).$mount("#app")


       
    </script>

</body>
</html>